<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <meta http-equiv="cache-control" content="max-age=0" />
  <meta http-equiv="cache-control" content="no-cache" />
  <meta http-equiv="expires" content="0" />
  <meta http-equiv="pragma" content="no-cache" />

  <style type="text/css">
    html, body, #canvas {
      height: 100%;
      padding: 0;
    }
    
    .transaction-boundary {
      background-color: rgba(180, 21, 21, 0.7);
      border-radius: 1px;
      min-height: 50px;
      width: 3px;
    }

    .execution-listener {
      background-color: rgba(21, 66, 180, 0.7);
      color: White;
      border-radius: 5px;
      font-family: Arial;
      font-size: 12px;
      padding: 5px;
      min-height: 16px;
      min-width: 16px;
      text-align: center;
      white-space: nowrap;
    }

    .highlight:not(.djs-connection) .djs-visual > :nth-child(1) {
      fill: rgba(66, 180, 21, 0.7) !important; /* color elements as green */
    }
    
    .highlight-running .djs-visual > :nth-child(1) {
    	fill: rgba(0, 198, 218, 0.7) !important; /* color still running flow nodes as blue */
    }
    
    #info-box {
   	  margin-left: 20px;
      margin-top: 15px;
      padding: 10px;
      table-layout: fixed;
      border-collapse: collapse;
      position: absolute;
      top: 0px;
      left: 0px;
      font-family: sans-serif;
      line-height: 150%;
      font-size: 80%;
      z-index: 1000;
      background-color: rgba(255,255,255,0.90);
      border-radius: 10px;
    }
  </style>

  <title>Process Test Coverage Report</title>
</head>
<body>

  <div id="info-box">
	<div>Process Definition Name: //PROCESSKEY</div>
	<div>Coverage: //COVERAGE</div>
	//TESTCLASS
	//TESTMETHOD
  </div>
  
  <!-- element to draw bpmn diagram in -->
  <div id="canvas"></div>

  <!-- scripts -->

  <!-- seed dependencies (required for demo only) -->
  <script src="../bower_components/jquery/dist/jquery.js"></script>

  <!-- bpmn-js viewer -->
  <script src="../bower_components/bpmn-js/dist/bpmn-navigated-viewer.js"></script>

  <!-- application -->
  <script>
    (function(NavigatedViewer, $) {

      // create viewer
      var bpmnViewer = new NavigatedViewer({
        container: '#canvas'
      });


      // import function
      function importXML(xml) {

        // import diagram
        bpmnViewer.importXML(xml, function(err) {

          if (err) {
            return console.error('could not import BPMN 2.0 diagram', err);
          }

          var canvas = bpmnViewer.get('canvas'),
              overlays = bpmnViewer.get('overlays');


          // zoom to fit full viewport
          canvas.zoom('fit-viewport', true);

      // visualizations          
      elementRegistry = bpmnViewer.get('elementRegistry');
      var elements = elementRegistry.getAll();
      console.log(elements);
      for (var i = 0; i < elements.length; i++) {
        var element = elements[i];
        if (element.type != 'label') {
          
          // Transaction Boundaries
          if (element.businessObject.$attrs["camunda:asyncBefore"]
                || element.businessObject.$attrs["camunda:async"]
                || element.type == 'bpmn:ReceiveTask'
                || element.type == 'bpmn:UserTask'
                || element.type == 'bpmn:IntermediateCatchEvent'
             ) {
            overlays.add(element.id, 'note', {
              position: {
                bottom: (element.type == 'bpmn:IntermediateCatchEvent' ? 18 : 40),
                left: -4
              },
              html: '<div class="transaction-boundary"></div>'
            });
          }
          if (element.businessObject.$attrs["camunda:asyncAfter"]) {
            overlays.add(element.id, 'note', {
              position: {
                bottom: 19,
                right: -1
              },
              html: '<div class="transaction-boundary"></div>'
            });
          }
          
          if (element.businessObject.extensionElements) {
            var extensionElements = element.businessObject.extensionElements.values;
            for (var j = 0; j < extensionElements.length; j++) {
              console.log(extensionElements[j]);
              if (extensionElements[j].$type == 'camunda:executionListener') {
                if (extensionElements[j].event == 'end') {
                  overlays.add(element.id, 'note', {
                    position: {
                      bottom: 0,
                      right: 0
                    },
                    html: '<div class="execution-listener">' + extensionElements[j].expression + '</div>'
                  });
                }
                if (extensionElements[j].event == 'start') {
                  overlays.add(element.id, 'note', {
                    position: {
                      bottom: 0,
                      left: 0
                    },
                    html: '<div class="execution-listener">' + extensionElements[j].expression + '</div>'
                  });
                }
              }
            }
          }
 
 		  if (element.type == 'bpmn:SequenceFlow' && element.businessObject.conditionExpression) {
 		      var position = {
                      left: 0
                    }
              if (element.waypoints[0].y > element.waypoints[element.waypoints.length - 1].y) {
              	position.top = -29;
              } else {
                position.bottom = -3;
              }    
          	  overlays.add(element.id, 'note', {
                    position: position,
                    html: '<div class="execution-listener">' + element.businessObject.conditionExpression.body + '</div>'
                  }); 
		  }
          
          if (element.businessObject.$attrs["camunda:delegateExpression"]) {
            overlays.add(element.id, 'note', {
              position: {
                bottom: -3,
                left: 0
              },
              html: '<div class="execution-listener">' + element.businessObject.$attrs["camunda:delegateExpression"] + '</div>'
            });
          }
          
        }
      }          
          //YOUR ANNOTATIONS GO HERE

        });
      }


      var diagramXML = 'YOUR BPMN XML CONTENT';
      importXML(diagramXML);

    })(window.BpmnJS, window.jQuery);
  </script>
</body>
</html>
